<template>
  <div>
    <ul>
      <li v-for="item in foo" :key="item.foo">{{ item.foo }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import {
  RESOURCE_A_GETTER,
  RESOURCE_B_GETTER,
  RESOURCE_C_GETTER,
  FETCH_RESOURCE_ACTION,
} from "@/constants/store";

export default {
  name: "PageIndex",
  data() {
    return {
      isResourceAReady: false,
      isResourceBReady: false,
      isResourceCReady: false,
    };
  },
  computed: {
    ...mapGetters([RESOURCE_A_GETTER, RESOURCE_B_GETTER, RESOURCE_C_GETTER]),
    foo() {
      const value = this.$store.getters[RESOURCE_A_GETTER];
      if (value.length > 0 && !this.isResourceAReady) {
        this.isResourceAReady = true;
        this.init();
      }
      return value;
    },
  },
  created() {
    const batch = [
      {
        target: "A",
        wait: 3,
      },
      {
        target: "B",
        wait: 5,
      },
      {
        target: "C",
        wait: 1,
      },
    ];
    batch.forEach((payload) => {
      this[FETCH_RESOURCE_ACTION](payload);
    });
  },
  watch: {
    [RESOURCE_B_GETTER](value) {
      if (value.length > 0 && !this.isResourceBReady) {
        this.isResourceBReady = true;
        this.init();
      }
    },
    [RESOURCE_C_GETTER](value) {
      if (value.length > 0 && !this.isResourceCReady) {
        this.isResourceCReady = true;
        this.init();
      }
    },
  },
  methods: {
    ...mapActions([FETCH_RESOURCE_ACTION]),
    init() {
      switch (false) {
        case this.isResourceAReady:
          return;
        case this.isResourceBReady:
          return;
        case this.isResourceCReady:
          return;
      }
      alert("init!");
    },
  },
};
</script>
